<!DOCTYPE html><html lang=en><head><meta charset=UTF-8><meta name=viewport content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><meta http-equiv=X-UA-Compatible content="IE=edge,Chrome=1"><meta name=description content="Linframe是国内推出的一个用于前端开发的开源工具包。它由lindf开发，是一个CSS/HTML框架。目前，Linframe最新版本为1.0 。Linframe中文网致力于为广大国内开发者提供详尽的中文文档、代码实例等，助力开发者掌握并使用这一框架。"><meta name=keywords content="Linframe,CSS,CSS框架,CSS framework,javascript,bootcss,bootstrap开发,bootstrap代码,bootstrap入门"><meta name=author content=lindingfeng><meta name=robots content=index,follow><meta name=application-name content=lindf.com><title>个人简历</title><link rel=icon href=img/icon4.ico><link rel=stylesheet href=css/lindf.css><style>
        .img-center {
            width: 481px;
            margin: 100px auto;
            height: 321px;
            position: relative;
            transform-style: preserve-3d; /* IE10、FireFox chrome */
            perspective: 1000px;  /* IE10、FireFox chrome */
            -webkit-transform-style: preserve-3d; /* chrome、Safari */
            -webkit-perspective: 1000px; /* chrome、Safari */
        }
        .img-center a {
            position: absolute;
            left: 0;
            top: 0;
            opacity: 1;
            -webkit-transition: 0.5s;
            -moz-transition: 0.5s;
            -ms-transition: 0.5s;
            -o-transition: 0.5s;
            transition: 0.5s;
        }
        .img-center a img {
            width: 481px;
            height: 321px;
        }
        .img-center a:nth-child(1) {
            -webkit-transform: rotateY(45deg) translateZ(-450px) translateX(-100px);
            -moz-transform: rotateY(45deg) translateZ(-450px) translateX(-100px);
            -ms-transform: rotateY(45deg) translateZ(-450px) translateX(-100px);
            -o-transform: rotateY(45deg) translateZ(-450px) translateX(-100px);
            transform: rotateY(45deg) translateZ(-450px) translateX(-100px);
            opacity: 0;
        }
        .img-center a:nth-child(2) {
            -webkit-transform: rotateY(45deg) translateZ(-350px) translateX(-100px);
            -moz-transform: rotateY(45deg) translateZ(-350px) translateX(-100px);
            -ms-transform: rotateY(45deg) translateZ(-350px) translateX(-100px);
            -o-transform: rotateY(45deg) translateZ(-350px) translateX(-100px);
            transform: rotateY(45deg) translateZ(-350px) translateX(-100px);
        }
        .img-center a:nth-child(3) {
            -webkit-transform: rotateY(0deg) translateZ(0px) translateX(0px);
            -moz-transform: rotateY(0deg) translateZ(0px) translateX(0px);
            -ms-transform: rotateY(0deg) translateZ(0px) translateX(0px);
            -o-transform: rotateY(0deg) translateZ(0px) translateX(0px);
            transform: rotateY(0deg) translateZ(0px) translateX(0px);
            z-index: 10;
        }

        .img-center a:nth-child(4) {
            -webkit-transform: rotateY(-45deg) translateZ(-350px) translateX(100px);
            -moz-transform: rotateY(-45deg) translateZ(-350px) translateX(100px);
            -ms-transform: rotateY(-45deg) translateZ(-350px) translateX(100px);
            -o-transform: rotateY(-45deg) translateZ(-350px) translateX(100px);
            transform: rotateY(-45deg) translateZ(-350px) translateX(100px);
        }
        .img-center a:nth-child(5) {
            -webkit-transform: rotateY(-45deg) translateZ(-450px) translateX(100px);
            -moz-transform: rotateY(-45deg) translateZ(-450px) translateX(100px);
            -ms-transform: rotateY(-45deg) translateZ(-450px) translateX(100px);
            -o-transform: rotateY(-45deg) translateZ(-450px) translateX(100px);
            transform: rotateY(-45deg) translateZ(-450px) translateX(100px);
            opacity: 0;
        }
    </style></head><body><div class=container><div class=img-center><a href=javascript:void(0);><img src=img/action1.jpg alt=img/action1.jpg></a> <a href=javascript:void(0);><img src=img/action2.jpg alt=img/action1.jpg></a> <a href=javascript:void(0);><img src=img/action3.jpg alt=img/action1.jpg></a> <a href=javascript:void(0);><img src=img/action4.jpg alt=img/action1.jpg></a> <a href=javascript:void(0);><img src=img/action5.jpg alt=img/action1.jpg></a></div></div><script src=js/jquery-1.10.1.min.js></script><script src=js/lindf.js></script><script>
    $(function () {
        var a1 = $('.img-center a:nth-child(1)');
        var a2 = $('.img-center a:nth-child(2)');
        var a3 = $('.img-center a:nth-child(3)');
        var a4 = $('.img-center a:nth-child(4)');
        var a5 = $('.img-center a:nth-child(5)');
        $('.btn').click(function () {
            a1.css(
                {'transform':'rotateY(-45deg) translateZ(-450px) translateX(100px)'}
            );
            a2.css(
                {'transform':'rotateY(45deg) translateZ(-450px) translateX(-100px)','opacity':0}
            );
            a3.css(
                {'transform':'rotateY(45deg) translateZ(-350px) translateX(-100px)'}
            );
            a4.css(
                {'transform':'rotateY(0deg) translateZ(0px) translateX(0px)'}
            );
            a5.css(
                {'transform':'rotateY(-45deg) translateZ(-350px) translateX(100px)','opacity':1}
            );
        });
        a1.index = 1;
        a2.index = 2;
        a3.index = 3;
        a4.index = 4;
        a5.index = 5;
        function demo(obj){
            setInterval(function () {
                if( obj.index == 1 ){
                    obj.index = 5;
                    obj.css(
                        {'transform':'rotateY(-45deg) translateZ(-450px) translateX(100px)'}
                    );
                }else if( obj.index == 2 ){
                    obj.index = 1;
                    obj.css(
                        {'transform':'rotateY(45deg) translateZ(-450px) translateX(-100px)','opacity':0}
                    );
                }else if( obj.index == 3 ){
                    obj.index = 2;
                    obj.get(0).style.zIndex = 10;
                    obj.css(
                        {'transform':'rotateY(45deg) translateZ(-350px) translateX(-100px)'}
                    );
                }else if( obj.index == 4 ){
                    obj.index = 3;
                    obj.get(0).style.zIndex = 100;
                    obj.css(
                        {'transform':'rotateY(0deg) translateZ(0px) translateX(0px)'}
                    );
                }else if( obj.index == 5 ){
                    obj.index = 4;
                    obj.css(
                        {'transform':'rotateY(-45deg) translateZ(-350px) translateX(100px)','opacity':1}
                    );
                }
            },1500);
        }
        demo(a1);
        demo(a2);
        demo(a3);
        demo(a4);
        demo(a5);
    });
</script></body></html>